<template>
  <div class="box">
    <!-- 步骤条 -->
 
      <div class="custom-steps">
        <div
          v-for="(step, index) in steps"
          :key="index"
          class="step-item"
          :class="{
            active: active === index,
            completed: active > index,
          }"
        >
          <div class="step-circle">{{ index + 1 }}</div>
          <div class="step-title">{{ step.title }}</div>
          <div v-if="index < steps.length - 1" class="step-separator">&gt;</div>
        </div>
      </div>
     
   
    <div class="form">
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-form-item label="排课任务名称" prop="name">
          <el-input
            v-model="form.name"
            placeholder="请输入排课任务名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="学年学期" prop="semester">
          <el-select v-model="form.semester" placeholder="请选择学年学期">
            <el-option label="2021-2022学年/第一学期 " value="1"></el-option>
            <el-option label="2021-2022学年/第二学期 " value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学段" prop="grade">
          <el-select v-model="form.grade" placeholder="请选择学段">
            <el-option label="高中 " value="gao"></el-option>
            <el-option label="初中 " value="chu"></el-option>
          </el-select> </el-form-item
        ><el-form-item label="年级" prop="nianji">
          <el-select v-model="form.nianji" placeholder="请选择年级">
            <el-option label="高一 " value="one"></el-option>
            <el-option label="高二 " value="two"></el-option>
            <el-option label="高三 " value="three"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务描述" prop="desc">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="btn">
      <el-button @click="$router.go(-1)">取消</el-button>
      <el-button type="primary" @click="next" style="margin-left: 30px;">下一步</el-button>
    </div>
    </div>
  
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      steps: [
        { title: "基本信息" },
        { title: "作息时间" },
        { title: "课程设置" },
        { title: "排课设置" },
        { title: "排课课位" },
        { title: "启动排课" },
        { title: "手动调整" },
        { title: "发布启用" },
      ],
      form: {
        name: "",
        semester: "",
        grade: "",
        nianji: "",
        desc: "",
      },
      rules: {
        name: [{ required: true, message: "请输入排课任务名称", trigger: "blur" }],
        semester: [
          { required: true, message: "请选择学年学期", trigger: "change" },
        ],
        grade: [{ required: true, message: "请选择学段", trigger: "change" }],
        nianji: [{ required: true, message: "请选择年级", trigger: "change" }],
      },
    };
  },
  methods: {
    next() {
      if (this.active < 7) this.active++;
      else this.active = 0;
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$router.push({name: "AddClass2"});
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.box{
  
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
background-color: #fff;
border-radius: 10px;
}

.custom-steps {
    margin-top: 20px;
    width:90%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
margin-bottom: 80px;
  background-color: #e0e6e8;
  height: 60px;
  .step-item {
    display: flex;
    align-items: center;

    .step-circle {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      background: #f0f2f5;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      font-weight: 600;
      color: #606266;
    }

    .step-title {
      margin: 0 10px;
      white-space: nowrap;
      font-size: 14px;
      color: #606266;
    }

    .step-separator {
      margin: 0 10px;
      color: #c0c4cc;
      font-weight: bold;
    }

    &.active {
      .step-circle {
        background: #409eff;
        color: white;
      }
      .step-title {
        color: #409eff;
        font-weight: bold;
      }
    }

    &.completed {
      .step-circle {
        background: #67c23a;
        color: white;
      }
      .step-title {
        color: #67c23a;
      }
    }
  }
}
.form{
    height: auto;
    display: flex;
    justify-content: center;

}
.btn{
    margin-top: 100px;
}

</style>
